<%@ page pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>
	<head>
		<title>jQuery UI Dialog - Modal form</title>
		<link type="text/css" href="${ctx}/HTML/jquery/jquery-themes/base/ui.all.css" rel="stylesheet" />
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-ui/ui.core.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-ui/ui.draggable.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-ui/ui.resizable.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-ui/ui.dialog.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-ui/effects.core.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-ui/effects.highlight.js"></script>
		<script type="text/javascript" src="${ctx}/HTML/jquery/jquery-external/bgiframe/jquery.bgiframe.js"></script>
		<link type="text/css" href="${ctx}/HTML/jquery/demos.css" rel="stylesheet" />
		<style type="text/css">
			body { font-size: 62.5%; }
			label, input { display:block; }
			input.text { margin-bottom:12px; width:95%; padding: .4em; }
			fieldset { padding:0; border:0; margin-top:25px; }
			h1 { font-size: 1.2em; margin: .6em 0; }
			div#users-contain {  width: 350px; margin: 20px 0; }
			div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
			div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
			.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
			.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
		</style>
		
		<script type="text/javascript">
			$(function() {
				
				var name = $("#name"),
					email = $("#email"),
					password = $("#password"),
					allFields = $([]).add(name).add(email).add(password);
					
				$("#dialog").dialog({
					bgiframe: true,
					autoOpen: false,
					height: 300,
					modal: true,
					buttons: {
						'Create an account': function() {
							alert('asdasdasdas');
						},
						
						Cancel: function() {
							$(this).dialog('close');
						}
					},
					close: function() {
						
					}
				});		
				
				$('#create-user').click(function() {
					$('#dialog').dialog('open');
				})
				.hover(
					function(){ 
						$(this).addClass("ui-state-hover"); 
					},
					function(){ 
						$(this).removeClass("ui-state-hover"); 
					}
				).mousedown(function(){
					$(this).addClass("ui-state-active"); 
				})
				.mouseup(function(){
						$(this).removeClass("ui-state-active");
				});
			});
		</script>
	</head>	
	<body>

		<div class="demo">
		
			<div id="dialog" title="Create new user">
				<form>
				<table width="100%" height="80%">
					<tr>
						<td width="30%">用户名：</td>
						<td width="70%"><input type="text" name="name" id="name"></td>
					</tr>
					<tr>
						<td>密码：</td>
						<td><input type="password" name="password" id="password"/></td>
					</tr>
				</table>	
				</form>
			</div>
		
			<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>
		</div>
</body>
</html>


	